<template>
<div>
    <vxe-toolbar>
        <template v-slot:buttons>
        <vxe-button @click="$refs.xTable.toggleRowExpand(tableData[1])">切换第二行展开</vxe-button>
        <vxe-button @click="$refs.xTable.setRowExpand([tableData[2], tableData[3]], true)">设置第三、四行展开</vxe-button>
        <vxe-button @click="$refs.xTable.setAllRowExpand(true)">设置所有行展开</vxe-button>
        <vxe-button @click="$refs.xTable.clearRowExpand()">关闭所有行展开</vxe-button>
        </template>
    </vxe-toolbar>

    <vxe-table
        border
        ref="xTable"
        :data="tableData"
        :expand-config="{visibleMethod: expandVisibleMethod, accordion: true}"
        >
        <vxe-table-column fixed="left" type="seq" width="60"></vxe-table-column>
        <vxe-table-column v-on:click.stop.prevent v-if="isExpandRow" type="expand" width="80">
            <template v-slot:content="{ row, rowIndex }">
                <!-- <ul>
                <li v-for="(item, index) in row.detailList" :key="index">
                    <span>Role: {{ item.role }}</span>
                    <span style="margin-left: 100px"> Age: {{ item.age }}</span>
                    <span style="margin-left: 100px"> Sex: {{ item.sex }}</span>
                </li>
                </ul> -->
                <slot v-bind:row="row" v-bind:rowIndex="rowIndex" name="expandRow"></slot>
            </template>
        </vxe-table-column>
         <vxe-table-column field="name" title="Name" width="300"></vxe-table-column>
          <vxe-table-column field="role" title="Role" width="300"></vxe-table-column>
          <vxe-table-column field="sex" title="Sex" width="300"></vxe-table-column>
        <vxe-table-column field="name" title="Name" width="200"></vxe-table-column>
        <vxe-table-column field="sex" title="Sex" width="200"></vxe-table-column>
        <vxe-table-column fixed="right" field="age" title="Age" width="200"></vxe-table-column>
    </vxe-table>
</div>
</template>
<script>
import XEUtils from 'xe-utils';
import ExpandArea from './ExpandArea.vue';
export default {
    components: {
        ExpandArea,
    },
    props: {
        isExpandRow: {
            type: Boolean,
            default: false
        }
    },
          data () {
            return {
              tableData: [
                { name: 'Develop', age: 20, sex: '女', detailList: [] },
                { name: 'Develop', age: 22, sex: '女', detailList: [] },
                { name: 'Develop', age: 24, sex: '男', detailList: [] },
                { name: 'Develop', age: 26, sex: '女', detailList: [] }
              ]
            }
          },
          methods: {
            expandVisibleMethod({ row }) {
                return row.age < 24;
            },
            loadContentMethod ({ row }) {
              return new Promise(resolve => {
                setTimeout(() => {
                  const detailList = XEUtils.sample([
                    { role: 'Develop', age: 20, sex: '女' },
                    { role: 'Develop', age: 22, sex: '女' },
                    { role: 'Develop', age: 24, sex: '男' },
                    { role: 'Develop', age: 26, sex: '女' },
                    { role: 'Develop', age: 28, sex: '男' },
                    { role: 'Develop', age: 30, sex: '男' }
                  ], XEUtils.random(1, 5))
                  row.detailList = detailList
                  resolve()
                }, 500)
              })
            }
          }
        }
</script>